<!-- edit fields -->
<div ng-if="beingEdited()" class="editting">
  <!-- buttons -->
  <div class="row" ng-class="{'always-show': beingEdited()}">
    <div class="pull-left">
      <div class="btn-group" role="group">
        <button
          type="button"
          class="btn btn-default active"
          ng-click="toggleEdit()">
          <span class="glyphicon glyphicon-edit"></span>
        </button>
        <button type="button" class="btn btn-default" ng-click="removeField()">
          <span class="glyphicon glyphicon-trash"></span>
        </button>
      </div>
    </div>
  </div>

  <!-- name -->
  <div class="row">
    <div class="form-group">
      <label
        for="fieldNameInput{{$index}}"
        class="control-label col-sm-4"
        ng-i18next="avAdmin.census.fieldNameLabel">
      </label>
      <div class="col-sm-8">
        <input
          type="text"
          class="form-control"
          ng-model="field.name"
          name="fieldNameInput{{$index}}"
          id="fieldNameInput{{$index}}"
          ng-i18next="[placeholder]avAdmin.census.fieldNamePlaceholder"
          required />
      </div>
    </div>
  </div>

  <!-- help text -->
  <div class="row">
    <div class="form-group">
      <label
        for="fieldHelpInput{{$index}}"
        class="control-label col-sm-4"
        ng-i18next="avAdmin.census.fieldHelpLabel">
      </label>
      <div class="col-sm-8">
        <input
          type="text"
          class="form-control"
          ng-model="field.help"
          name="fieldHelpInput{{$index}}"
          id="fieldHelpInput{{$index}}"
          ng-i18next="[placeholder]avAdmin.census.fieldHelpPlaceholder"
          required />
      </div>
    </div>
  </div>

  <!-- type -->
  <div class="row">
    <div class="form-group">
      <label
        for="fieldTypeInput{{$index}}"
        class="control-label col-sm-4"
        ng-i18next="avAdmin.census.fieldTypeLabel">
      </label>
      <div class="col-sm-8">
        <select
          class="form-control"
          ng-model="field.type"
          name="fieldTypeInput{{$index}}"
          id="fieldTypeInput{{$index}}">
          <option value="email" ng-i18next>
            avAdmin.census.emailOption
          </option>
          <option value="password" ng-i18next>
            avAdmin.census.passwordOption
          </option>
          <option value="text" ng-i18next>
            avAdmin.census.textOption
          </option>
          <option value="int" ng-i18next>
            avAdmin.census.intOption
          </option>
          <option value="bool" ng-i18next>
            avAdmin.census.boolOption
          </option>
          <option value="captcha" ng-i18next>
            avAdmin.census.captchaOption
          </option>
          <option value="textarea" ng-i18next>
            avAdmin.census.textareaOption
          </option>
          <option value="dict" ng-i18next>
            avAdmin.census.dictOption
          </option>
        </select>
      </div>
    </div>
  </div>

  <!-- reg expr -->
  <div
    class="row"
    ng-if="['text', 'int'].indexOf(field.type) !== -1">
    <div class="form-group">
      <label
        for="fieldRegExInput{{$index}}"
        class="control-label col-sm-4"
        ng-i18next="avAdmin.census.fieldRegExLabel">
      </label>
      <div class="col-sm-8">
        <input
          type="text"
          class="form-control"
          ng-model="field.regex"
          name="fieldRegExInput{{$index}}"
          id="fieldRegExInput{{$index}}"
          ng-i18next="[placeholder]avAdmin.census.fieldRegExPlaceholder" />
      </div>
    </div>
  </div>

  <!-- min num -->
  <div class="row" ng-if="['password', 'code', 'text', 'textarea', 'int'].indexOf(field.type) !== -1">
    <div class="form-group">
        <label class="col-sm-4 control-label" for="winners" ng-i18next>
          avAdmin.census.fieldMinLabel
        </label>
        <div class="col-sm-8">
            <div class="input-group col-xs-4">
              <span class="input-group-btn">
                <button class="btn btn-default" type="button" ng-click="incOpt('min', -1)">
                    <span class="glyphicon glyphicon-minus" aria-hidden="true"></span>
                </button>
              </span>
              <input
                type="text"
                step="1"
                class="form-control"
                ui-keypress="{
                  37: 'incOpt(\'min\', -1, $event)',
                  38: 'incOpt(\'min\', 1, $event)',
                  39: 'incOpt(\'min\', 1, $event)',
                  40: 'incOpt(\'min\', -1, $event)'
                }"
                ng-model="field.min" />
              <span class="input-group-btn">
                <button class="btn btn-default" type="button" ng-click="incOpt('min', 1)">
                    <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
                </button>
              </span>
            </div>
        </div>
    </div>
  </div>

  <!-- max num -->
  <div class="row" ng-if="['password', 'code', 'text', 'textarea', 'int'].indexOf(field.type) !== -1">
    <div class="form-group">
        <label class="col-sm-4 control-label" for="winners" ng-i18next>
          avAdmin.census.fieldMaxLabel
        </label>
        <div class="col-sm-8">
            <div class="input-group col-xs-4">
              <span class="input-group-btn">
                <button class="btn btn-default" type="button" ng-click="incOpt('max', -1)">
                    <span class="glyphicon glyphicon-minus" aria-hidden="true"></span>
                </button>
              </span>
              <input
                type="text"
                min="{{field.min}}" step="1"
                ui-keypress="{
                  37: 'incOpt(\'max\', -1, $event)',
                  38: 'incOpt(\'max\', 1, $event)',
                  39: 'incOpt(\'max\', 1, $event)',
                  40: 'incOpt(\'max\', -1, $event)'
                }"
                class="form-control"
                ng-model="field.max" />
              <span class="input-group-btn">
                <button class="btn btn-default" type="button" ng-click="incOpt('max', 1)">
                    <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
                </button>
              </span>
            </div>
        </div>
    </div>
  </div>

  <!-- required -->
  <div class="row"  ng-if="['email', 'text', 'int', 'bool', 'textarea'].indexOf(field.type) !== -1">
    <div class="form-group">
      <label
        class="control-label col-sm-4 text-right">
        <input
          type="checkbox"
          class="form-control"
          id="fieldRequiredInput{{$index}}"
          ng-model="field.required" />
      </label>
      <div class="col-sm-8">
        <label
          ng-i18next="avAdmin.census.fieldRequiredLabel"
          class="text-left"
          for="fieldRequiredInput{{$index}}">
        </label>
      </div>
    </div>
  </div>

  <!-- unique -->
  <div class="row"  ng-if="['email', 'text', 'int', 'bool', 'textarea'].indexOf(field.type) !== -1">
    <div class="form-group">
      <label
        class="control-label col-sm-4 text-right">
        <input
          type="checkbox"
          class="form-control"
          id="fieldUniqueInput{{$index}}"
          ng-model="field.unique" />
      </label>
      <div class="col-sm-8">
        <label
          ng-i18next="avAdmin.census.fieldUniqueLabel"
          class="text-left"
          for="fieldUniqueInput{{$index}}">
        </label>
      </div>
    </div>
  </div>

  <!-- private -->
  <div class="row"  ng-if="['email', 'text', 'int', 'bool', 'textarea'].indexOf(field.type) !== -1">
    <div class="form-group">
      <label
        class="control-label col-sm-4 text-right">
        <input
          type="checkbox"
          class="form-control"
          id="fieldPrivateInput{{$index}}"
          ng-model="field.private" />
      </label>
      <div class="col-sm-8">
        <label
          ng-i18next="avAdmin.census.fieldPrivateLabel"
          class="text-left"
          for="fieldPrivateInput{{$index}}">
        </label>
      </div>
    </div>
  </div>

  <!-- required on authentication -->
  <div class="row"  ng-if="['email', 'text', 'int', 'bool', 'textarea', 'captcha'].indexOf(field.type) !== -1">
    <div class="form-group">
      <label
        class="control-label col-sm-4 text-right">
        <input
          type="checkbox"
          class="form-control"
          id="fieldRequiredAuthInput{{$index}}"
          ng-model="field.required_on_authentication" />
      </label>
      <div class="col-sm-8">
        <label
          ng-i18next="avAdmin.census.fieldRequiredAuthLabel"
          class="text-left"
          for="fieldRequiredAuthInput{{$index}}">
        </label>
      </div>
    </div>
  </div>
</div>

<!-- view field -->
<div ng-if="!beingEdited()" class="container-fluid view-field" ng-class="{'editable': !field.must && electionEditable()}">
  <!-- buttons -->
  <div class="row" ng-if="!field.must && electionEditable()">
    <div class="pull-left">
      <div class="btn-group" role="group">
        <button
          type="button"
          class="btn btn-default"
          ng-click="toggleEdit()">
          <span class="glyphicon glyphicon-edit"></span>
        </button>
        <button type="button" class="btn btn-default" ng-click="removeField()">
          <span class="glyphicon glyphicon-trash"></span>
        </button>
      </div>
    </div>
  </div>

  <div class="row" ng-if="field.must">
    <div class="pull-left non-editable">
      <span ng-i18next>
        avAdmin.census.nonEditableField
      </span>
    </div>
  </div>
  <div class="row">
    <div ng-switch="field.type">
      <div avr-email-field ng-switch-when="email"></div>
      <div avr-password-field ng-switch-when="password"></div>
      <div avr-code-field ng-switch-when="code"></div>
      <div avr-text-field ng-switch-when="text"></div>
      <div avr-text-field ng-switch-when="tlf"></div>
      <div avr-int-field ng-switch-when="int"></div>
      <div avr-bool-field ng-switch-when="bool"></div>
      <div avr-captcha-field ng-switch-when="captcha"></div>
      <div avr-textarea-field ng-switch-when="textarea"></div>
      <div ng-switch-when="dict" class="col-sm-4 text-right dict-field">
        <span>{{field.name}}</span>
      </div>
    </div>
  </div>
</div>